import React from 'react'
import { Button, Form, Input, message, Space } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { loginApi } from '@/api/login';
import '@/assets/css/login.scss'
import type { loginParams } from '@/types/logintype';
import { useNavigate } from 'react-router-dom'

// 引入store(第三方的库, 是对loacalStorage的封装)
import store from 'store'

//封装过的hook useAppDispatch 相当于useDispatch,只不过添加了类型
import { useAppDispatch } from '@/store/hooks/index'
// 导入修改rtk 仓库中的数据的方法
import {
    setAdminname,
    setCheckedkeys,
    setRole,
    setToken
} from '@/store/slices/userSlice';

const App: React.FC = () => {
    const [messageApi, contextHolder] = message.useMessage();
    // 创建 dispatch方法
    const dispatch = useAppDispatch();
    // 创建路由对象
    const navigate = useNavigate()

    // 提交表单,点击登录执行的函数
    const onFinish = (values: loginParams) => {
        // console.log('Success:', values);
        loginApi(values).then(res => {
            console.log('res', res);
            // 01: 进行成功的提示
            messageApi.open({
                type: 'success',
                content: res.data.message,
                duration: 2,
                onClose() {
                    //02: 将用户信息存到本地(token)
                    // 语法: store.set(key,value)
                    store.set('userinfo', {
                        adminname: res.data.data.adminname,
                        checkedkeys: res.data.data.checkedkeys,
                        role: res.data.data.role,
                        token: res.data.data.token
                    });

                    // 03:将用户信息也存在rtk 仓库一份
                    dispatch(setAdminname(res.data.data.adminname));
                    dispatch(setCheckedkeys(res.data.data.checkedkeys));
                    dispatch(setRole(res.data.data.role));
                    dispatch(setToken(res.data.data.token))
                    //04: 路由跳转到首页
                    navigate('/home')
                }
            });




        })
    }

    return (
        <div className="loginbox">
            {contextHolder}
            <h2>嗨购后台系统</h2>
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{ remember: true }}
                onFinish={onFinish}
            >
                <Form.Item
                    name="adminname"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input size='large' prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码!!' }]}
                >
                    <Input
                        size='large'
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="密码"
                    />
                </Form.Item>
                <Form.Item>
                    <Button size='large' type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>)

};

export default App;